<template>
	<view class="flex-col page">
		<view class="flex-col group_2">
			<image :src="imgUrl+'16557826684196968135.png'" class="image_6" />
			<view class="flex-col group_3">
				<view class="flex-col group_6">

					<view class="flex-row group_7">
						<image :src="imgUrl+'16557826680563820686.png'" class="image_11 image_12" />
						<u-input placeholderStyle="color:#bababa" placeholder="请输入手机号" v-model="form.phone"
							placeholderClass="placeholderClass" border="none" class="input" clearable maxlength="11">
						</u-input>
					</view>
				</view>
				<!-- 验证码 -->
				<view class="flex-col group_8">
					<image :src="imgUrl+'16557826684246479237.png'" class="image_9 image_13" />
					<view class="justify-between group_7">
						<view class="flex-row">
							<image :src="imgUrl+'16557826687461271724.png'" class="image_11 image_14" />
							<u-input placeholderStyle="color:#bababa" placeholder="请输入验证码" v-model="form.code"
								border="none" class="input u-m-l-30" style="width: 218px;" clearable maxlength="6">
							</u-input>
						</view>
						<text class="text_3" @tap="getCode">{{tips}}</text>
						<view class="wrap">
							<u-toast ref="uToast"></u-toast>
							<u-code :seconds="seconds" ref="uCode" @change="codeChange">
							</u-code>
						</view>
					</view>
					<image :src="imgUrl+'16557826684246479237.png'" class="image_9 image_15" />
				</view>
				<!-- 请输入密码 -->
				<view class="justify-between group_10 w-full">
					<view class="flex-row">
						<image :src="imgUrl+'16557826680099271215.png'" class="image_11 image_16" />
						<input v-model="form.password" :type="seen ? type_text : type_password"
							placeholder="请输入密码 (6-12位字母+数字)" maxlength="12" placeholder-style="color:#bababa "
							class="input u-flex-1 b-w-f"></input>
					</view>
					<image class="image100" v-show='seen' @click="changeSeen" :src="imgUrl+'login/open.png'" />
					<image v-show='!seen' @click="changeSeen" :src="imgUrl+'16557826676388745889.png'"
						class="image_11" />
				</view>

				<image :src="imgUrl+'16557826684246479237.png'" class="image_9 image_18" />
			</view>
			<!-- 注册 -登录 -->
			<view class="flex-col group_12">
				<view class="flex-col items-center button" @click="reg"><text class="text_5">注册</text></view>
				<view class="button_1">
					<text class="text_6">已有账号，前去</text>
					<text class="text_7" @click="go('/pages/login/login')">登录</text>
				</view>
			</view>
			<!-- 已阅读并同意 -->
			<view class="justify-center group_13">
				<view class="agreement">
					<u-checkbox-group v-model="checked">
						<u-checkbox shape="circle" size="30" iconSize="30"></u-checkbox>
					</u-checkbox-group>
					<text>已阅读并同意</text> <text class="black" @click="regAgreement">《用户注册协议》</text>与<text class="black"
						@click="agreement">《隐私政策》</text>
				</view>
			</view>
			</u--form>
		</view>
		<!-- <u-picker :show="show" itemHeight="60" ref="uPicker" :columns="columns" keyName="label" @confirm="confirm" @cancel="show=false"
			@close="show=false"></u-picker> -->

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				istext: true,
				istexts: false,
				userText: '请选择用户角色',
				seen: false,
				type_text: "text",
				type_password: "password",
				show: false,
				imgUrl: this.$IMG_URL,
				columns: [
					[{
						label: '用户',

						value: 103

					}, {
						label: '工长',
						value: 104
					}]
				],
				checked: [],
				tips: '',
				seconds: 60,
				form: {
					roleId: '103',
					phone: '',
					code: '',
					password: ''
				}
			};
		},
		onReady() {
			// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
			// 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量
			// this.refCode = this.$refs.uCode;
		},
		methods: {

			changeSeen() {
				this.seen = !this.seen;
			},
			codeChange(text) {
				this.tips = text;
			},
			// userOption() {
			// 	this.show = true;
			// 	this.istexts = true
			// },
			// confirm(e) {
			// 	console.log(e);
			// 	this.form.roleId = e.value[0].value;
			// 	this.userText = e.value[0].label;
			// 	this.show = false
			// },
			reg() {

				if (this.form.roleId == '') {
					this.$u.toast('请选择用户角色');
					return;
				}
				if (this.form.phone == '') {
					this.$u.toast('请输入手机号');
					return;
				} else {
					if (!uni.$u.test.mobile(this.form.phone)) {
						this.$u.toast('手机号码格式错误');
						return;
					}
				}
				if (this.form.code == '') {
					this.$u.toast('请输入验证码');
					return;
				}
				if (this.form.password == '' || this.form.password.length < 6) {
					this.$u.toast('密码至少6位(字母+数字)');
					return;
				} else {
					let reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);

					if (!reg.test(this.form.password)) {
						this.$u.toast('密码格式错误,至少6位(字母+数字)');
						return;
					}
				}
				if (this.checked.length == 0) {
					this.$u.toast('请勾选已阅读《用户注册协议》与《隐私政策》');
					return;
				}
				this.$http('user.reg', this.form).then(r => {
					if (r.code == 200) {
						this.$u.toast(r.msg);
						this.go('/pages/login/login');


					} else {
						this.$u.toast(r.msg);
					}
				})
			},
			getCode() {
				if (this.form.phone == '') {
					this.$u.toast('请输入手机号码');
					return;
				} else {
					if (!uni.$u.test.mobile(this.form.phone)) {
						this.$u.toast('请输入正确的手机号码');
						return;
					}
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$http('user.code', {
						phone: this.form.phone
					}).then(r => {
						if (r.code == 200) {
							this.form.code = r.data;
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							uni.$u.toast(r.msg);
						}
					});

				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			},
			regAgreement() {
				uni.navigateTo({
					url: "/pages/login/regAgreement"
				})
			},
			agreement() {
				uni.navigateTo({
					url: "/pages/login/agreement"
				})
			},

		},
	};
</script>

<style scoped lang="scss">
	.image100 {
		width: 42rpx;
		height: 34rpx;
	}

	.agreement {
		margin-top: 70rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 38rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 38rpx;
		color: RGBA(153, 153, 153, 1);
		opacity: 1;



	}

	.black {
		color: RGBA(36, 36, 36, 1);
	}

	.input {
		margin-left: 28rpx;
		color: #bfbfbf;
	}

	.b-w-f {
		border: 0px;
		outline: 0px;
		width: 250px;
		color: #000;
		font-size: 28rpx;
	}

	.black {
		color: RGBA(55, 55, 55, 1);
	}

	.image_9 {
		width: 638rpx;
		height: 2rpx;
	}

	.group_7 {
		padding-top: 36rpx;
	}

	.image_11 {
		width: 34rpx;
		height: 34rpx;
	}

	.page {
		background-color: #ffffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_2 {
		padding: 88rpx 50rpx 46rpx 56rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.image_6 {
		align-self: center;
		border-radius: 40rpx;
		box-shadow: 0px 8rpx 20rpx 0px #1d6aff1f;
		width: 180rpx;
		height: 180rpx;
	}

	.group_3 {
		margin-top: 38rpx;
	}

	.group_12 {
		margin-top: 97rpx;
	}

	.group_13 {
		margin-top: 101rpx;
	}

	.group_6 {
		margin-top: 44rpx;
	}

	.group_8 {
		margin-top: 45rpx;
	}

	.image_15 {
		margin-left: 4.5rpx;
		margin-top: 44rpx;
	}

	.group_10 {
		padding: 43rpx 0 42rpx;
	}

	.image_18 {
		margin-left: 4.5rpx;
	}

	.button {
		margin-right: 6rpx;
		padding: 19rpx  31rpx;
		background-color: #1d6aff;
		border-radius: 44rpx;
	}

	.button_1 {
		margin-top: 30rpx;
		align-self: center;
		line-height: 33rpx;
	}

	.image_19 {
		margin-top: 8rpx;
		width: 20rpx;
		height: 20rpx;
	}

	.group_14 {
		margin-left: 12rpx;
		line-height: 26rpx;
		height: 26rpx;
	}

	.image_8 {
		margin-right: 6rpx;
		align-self: center;
		width: 28rpx;
		height: 16rpx;
	}

	.image_10 {
		margin-left: 4rpx;
	}

	.image_13 {
		margin-left: 4rpx;
	}

	.text_5 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_6 {
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_7 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_8 {
		color: #999999;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_9 {
		color: #181818;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_10 {
		color: #999999;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_11 {
		color: #181818;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.image_7 {
		margin-top: 7rpx;
		flex-shrink: 0;
		width: 34rpx;
		height: 36rpx;
	}

	.text {
		margin-left: 28rpx;
		margin-bottom: 5rpx;
		color: #bababa;
		font-size: 30rpx;
		font-family: '.AppleSystemUIFont';
	}

	.texts {
		margin-left: 28rpx;
		margin-bottom: 5rpx;
		color: #000000;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.image_12 {
		margin-top: 8rpx;
	}

	.text_1 {
		margin-left: 28rpx;
		margin-bottom: 4rpx;
		color: #bfbfbf;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_3 {
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		margin: 3rpx 0rpx 7rpx 0rpx;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.image_16 {
		flex-shrink: 0;
	}

	.text_4 {
		margin-left: 28rpx;
		color: #bfbfbf;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_14 {
		margin-top: 9rpx;
		flex-shrink: 0;
	}

	.text_2 {
		margin-left: 28rpx;
		margin-bottom: 5rpx;
		color: #bfbfbf;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}
</style>
